<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../img/com/logo.png">
    <link rel="stylesheet" href="../asserts/css/normalize.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/pageCom.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
				.whitePage form{
					width: 100%;
					/* z-index: -1;
					position: absolute;
					top: 0;
					bottom: 0; */
				}
        /*提交、删除  导航菜单*/
        li{
            list-style: none;
        }
        .NavList li img{
            width: 0.8rem;
            height: 0.8rem;
            vertical-align: middle;
            line-height: 1.2rem;
        }
        .NavList li span{
            margin-left: 0.5rem;
        }
        input::placeholder {
            padding-left: 0.2rem;
        }
          /*table表格内容格子*/
        table {
            width: 100%;
            /*border-collapse:collapse;*/

        }
        thead > tr > th {
            width: 6%;
            padding: 0.5rem 1rem;
            background-color:#00abde;
            text-align: center;
        }
        tbody > tr > td {
            /*display: table-header-group;*/
            width: 6%;
            font-size: .8rem;
            padding: 1rem 1rem;
            height: 2rem;
            text-align: center;
            border: 1px solid gray;
        }
				.whitePage table > tbody > tr > td{
					padding: 0;
				}
				
        table th,
        table td{
            position: relative;
        }
        input{
            width: 100%;
            height: 100%;
						border: 0;
        }
        /* 注释注释 */
        /*table表格内容格子*/
        .tableBox{
            margin-top: 0.3rem;
        }
        .one{
            position: relative;
            display: table-header-group;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
        .sel{
            position:absolute;
            top: 0;
            left: 0;
            display: block;
            width:100%;
            height:100%;

        }
        .sel select{
            width:100%;
            height:100%;
            border:0;
        }
        .inp{
            width: 83%;
            position:absolute;
            left: 0;
            top: 0;
            border:0;
            height: 100%;
            /* border-top:1px solid #c1c1c1;
            border-left:1px solid #c1c1c1;
            border-bottom:1px solid #c1c1c1; */
        }
        .inp input{
            width:100%;
            border:0px;
            display: block;
            height: 100%;
        }

        .tableDiv{
            margin-top: 1rem;
        }
				.radioBtn{
					width: 20px;
				}
    </style>
</head>
<body class="whitePage" id="05_01fengxianshijianchuli" data-title="风险事件处理">
<div class="container">
    <nav class="pagination">
        <ul class="NavList">
            <li><img src="../img/05_fengxianguanli/submit.gif" alt=""><span id="submit">提交</span></li>
            <li><img src="../img/05_fengxianguanli/addition.gif" alt=""><span id="addRecord">增加记录</span></li>
            <li><img src="../img/05_fengxianguanli/deleted.gif" alt=""><span id="deleteColumn">删除列行</span></li>
        </ul>
    </nav>
    <div class="tableDiv" style="width:100%;overflow-x:auto;">
        <table style="width:100%;">
            <thead>
            <tr>
								<th>选择</th>
                <th>风险类别</th>
                <th>风险指标</th>
                <th>风险指标值</th>
                <th>阙值</th>
                <th>超出额</th>
                <th>机构名称</th>
                <th>机构代码</th>
                <th>客户号</th>
                <th>客户名称</th>
                <th>业务菜单名称</th>
                <th>业务菜单编码</th>
                <th>业务类型</th>
                <th>业务编码</th>
                <th>处理状态</th>
                <th>风险说明</th>
								<th>备注</th>
            </tr>
            </thead>
            <tbody>
            <tr>
								<td><input type="radio" name="radio" value="0" class="radioBtn"></td>
                <td>
									<div class="one">
											<span class="sel">
													<select name="makeupCoSe" id="makeupCoSe" class="selected">
													<option value=""></option>
													<option id='1' value='信用风险'>信用风险</option>
													<option id='2' value='资产风险++'>资产风险</option>
													<option id='3' value='管理风险'>管理风险</option>
													<option id='4' value='合规风险'>合规风险</option>
													<option id='5' value='声誉风险'>声誉风险</option>
													</select>
											</span>
									</div>
                </td>
                <td>
									<div class="one">
										<span class="sel">
												<select name="makeupCoSe" id="riskIndex" class="selected" >
												<option value=""></option>
												<option id="6" value='不良率'>不良率</option>
												<option  value='迁徙率'>迁徙率</option>
												<option  value='集中度'>集中度</option>
												<option  value='贷款收息率'>贷款收息率</option>
												<option  value='逾期贷款损失率'>逾期贷款损失率</option>
												</select>
										</span>
									</div>
                </td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td>0%</td>

                <td>
									<div class="one">
										<span class="sel">
												<select name="makeupCoSe" id="mechanism" class="selected" >
												<option value="海尔小额贷款">海尔小额贷款</option>
												<option  value='蚂蚁小额贷款'>蚂蚁小额贷款</option>
												<option  value='汇金小额贷款'>汇金小额贷款</option>
												<option  value='西岸小额贷款'>西岸小额贷款</option>
												<option  value='中鸿小额贷款'>中鸿小额贷款</option>
												</select>
										</span>
									</div>
								</td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td>未处理</td>
                <td>
								</td>
                <td><input type="text"></td>
								
            </tr>
            </tbody>
        </table>
    </div>

</div>
<script src="../asserts/js/jquery-2.2.4.js"></script>
<script src="../js/pageCom.js"></script>
<script src="../js/chartsCom.js"></script>

</body>
</html>
<script language="javascript">
    // function changeF() {
    //     document.getElementById('makeupCo').value= document.getElementById('makeupCoSe').options[document.getElementById('makeupCoSe').selectedIndex].value;
    //     // document.getElementsByClassName('inputs').value= document.getElementsByClassName('selected').options[document.getElementsByClassName('selected').selectedIndex].value;
    //     document.getElementById('riskIndexCo').value= document.getElementById('riskIndex').options[document.getElementById('riskIndex').selectedIndex].value;
		// 		document.getElementById('thresholdCo').value= document.getElementById('threshold').options[document.getElementById('threshold').selectedIndex].value;
		// 		document.getElementById('mechanismCo').value= document.getElementById('mechanism').options[document.getElementById('mechanism').selectedIndex].value;
		// 		document.getElementById('businessCo').value= document.getElementById('business').options[document.getElementById('business').selectedIndex].value;
				
    // }
		$(document).ready(function(){
			var length = $('tbody').children('tr').length
			var  append = ""

			var deleteOne = 1
			$('#deleteColumn').click(function(){
				deleteOne = $('input[name="radio"]:checked').val()
				if (deleteOne) {
					 $('tbody tr').eq(deleteOne).remove()
					length--
				}else{
					alert('请选择一条数据')
				}
				console.log(deleteOne)
			
			})
			
			$('#addRecord').click(function(){
				length++
				appendTr(length-1)
				
			})
			function appendTr(index){
				append="<tr id='line"+index+"'>"+
									"<td><input type='radio' name='radio' value='"+index+"' class='radioBtn'></td>"+
									"<td><div class='one'>"+
											"<span class='sel'>"+
													"<select name='makeupCoSe' class='selected'>"+
													"<option value=''></option>"+
													"<option value='风险类型'>风险类型</option>"+
													"<option  value='c++'>c++</option>"+
													"<option  value='python'>python</option>"+
													"</select>"+
											"</span>"+
									"</div>"+
                "</td>"+
								"<td><div class='one'>"+
											"<span class='sel'>"+
													"<select name='makeupCoSe' id='makeupCoSe' class='selected'>"+
													"<option value=''></option>"+
													"<option  value='风险类型'>风险类型</option>"+
													"<option  value='c++'>c++</option>"+
													"<option  value='python'>python</option>"+
													"</select>"+
											"</span>"+
									"</div>"+
                "</td>"+
								"<td><input type='text'></td>"+
								"<td><div class='one'>"+
											"<span class='sel'>"+
													"<select name='makeupCoSe' class='selected'>"+
													"<option value=''></option>"+
													"<option value='风险类型'>风险类型</option>"+
													"<option value='c++'>c++</option>"+
													"<option value='python'>python</option>"+
													"</select>"+
											"</span>"+
									"</div>"+
                "</td>"+
								"<td>0%</td>"+
								"<td><div class='one'>"+
											"<span class='sel'>"+
													"<select name='makeupCoSe' class='selected'>"+
													"<option value=''></option>"+
													"<option value='风险类型'>风险类型</option>"+
													"<option  value='c++'>c++</option>"+
													"<option  value='python'>python</option>"+
													"</select>"+
											"</span>"+
									"</div>"+
                "</td>"+
								"<td>001</td><td><input type='text'></td><td><input type='text'></td>"+
								"<td><div class='one'>"+
											"<span class='sel'>"+
													"<select name='makeupCoSe' class='selected'>"+
													"<option value=''></option>"+
													"<option value='风险类型'>风险类型</option>"+
													"<option  value='c++'>c++</option>"+
													"<option  value='python'>python</option>"+
													"</select>"+
											"</span>"+
									"</div>"+
                "</td>"+
								"<td><input type='text'></td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td>未处理</td>"+
								"<td><input type='text'></td><td><input type='text'></td>"
							"<tr>"

				$('tbody').append(append)
			}
				

		})
</script>
